<template>
  <!--  边坡档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree
          v-model="deptTree"
          ref="deptTree"
          :changeOnSelect="true"
          placeholder="选择管养单位"
          @change="selectOrgHandel"
        ></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                @click.native="breadClick(item.deptTreeIdList)"
                v-for="item in deptTree.breadList"
                :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName }}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <!-- 数据统计-->
          <el-row>
            <el-col :span="8">
              <!--路线统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsOneChange"></echarts-nesting-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--路线边坡高度Top10-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-strip-change ref="echartsTwoChange"></echarts-strip-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--路线边坡数Top10-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsThreeChange"></echarts-nesting-change>
              </el-card>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="边坡编号/名称" style="width:270px">
              <template slot="prepend">边坡编号/名称</template>
            </el-input>
            <el-input v-model="form.height" clearable placeholder="高度(m)" style="width:200px">
              <template slot="prepend">高度大于</template>
            </el-input>
            <el-autocomplete
              style="width:160px"
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
            <el-select v-model="form.slopeType" clearable placeholder="边坡类型" style="width: 110px">
              <el-option
                v-for="item in EnumSlopeTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-select v-model="form.slopeSlideType" clearable placeholder="道路类型" style="width: 110px">
              <el-option
                v-for="item in EnumSlopeSlideTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-select v-model="form.isGuoSheng" clearable placeholder="路线类型" style="width: 110px">
              <el-option
                v-for="item in isGuoShengList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-select v-model="form.isMsjg" clearable placeholder="锚索加固" style="width: 110px">
              <el-option
                v-for="item in booleanList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-select v-model="form.isScbp" clearable placeholder="顺层边坡" style="width: 110px">
              <el-option
                v-for="item in booleanList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button
              class="common_btn-defalut"
              icon="el-icon-search"
              @click="form.page = 1;queryList();">搜索
            </el-button>
          </div>

          <div class="page_main">
            <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small"
                       :disabled="hasPermission('road:slopeInfo:add')?false:'disabled'"
            >新增边坡基础档案
            </el-button>

            <el-button icon="el-icon-plus" @click.stop="handleCopy" class="common_btn-small">在建转运营边坡基础档案</el-button>
            <el-button icon="el-icon-plus" @click.stop="empower" class="common_btn-small"
                       v-if="hasPermission('road:slopeInfo:buildAdd')">授权
            </el-button>

            <el-button
              :disabled="hasPermission('road:slopeInfo:del')?false:'disabled'"
              @click.stop="handleDelete"
              icon="el-icon-delete-solid"
              type="danger">批量删除
            </el-button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border
                      @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="80"></el-table-column>
              <el-table-column label="序号" fixed width="80">
                <template slot-scope="scope">
                  {{ getIndex(scope.$index) }}
                </template>
              </el-table-column>
              <el-table-column prop="slopeNo" width="180" label="边坡编号"></el-table-column>
              <el-table-column prop="name" min-width="220" show-overflow-tooltip label="边坡名称"></el-table-column>
              <el-table-column prop="slopeTypeName" width="120" label="边坡类型"></el-table-column>
              <el-table-column prop="height" width="100" label="边坡高度">
                <template slot-scope="scope">
                  {{ scope.row.height }}m
                </template>
              </el-table-column>
              <el-table-column prop="roadName" width="180" label="所属路线"></el-table-column>
              <el-table-column prop="deptName" min-width="150" show-overflow-tooltip label="管养单位"></el-table-column>
              <el-table-column prop="stoke" label="起止桩号" width="200"></el-table-column>
              <el-table-column prop="positionName" width="100" label="边坡位置"></el-table-column>
              <el-table-column prop="slopeLength" width="100" label="边坡长度">
                <template slot-scope="scope">
                  {{ scope.row.slopeLength }}m
                </template>
              </el-table-column>
              <el-table-column prop="height" width="100" label="在建转入">
                <template slot-scope="scope">
                  {{ scope.row.buildSlopeId?'是':'否' }}
                  <span v-if="scope.row.buildSlopeId" @click.stop="lookBuildSlopeInfo(scope.row)">

                    <i class="el-icon-warning s-icon" style="color:#1990FE "></i>
                  </span>

                </template>
              </el-table-column>
              <el-table-column prop="isMsjg" width="100" label="锚索加固"></el-table-column>
              <el-table-column prop="isScbp" width="100" label="顺层边坡"></el-table-column>
              <el-table-column prop="updateTime" width="180" label="更新时间">
                <template slot-scope="scope">
                  {{scope.row.updateTime | formatTimer2 }}
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" :width="hasPermission('road:slopeInfo:del')?190:150">

                <template slot-scope="scope">

                  <button class="btn_add" @click="downloadSlopeInfo(scope.row.id)">
                    下载档案
                  </button>
                  <button class="btn_add" @click="checkDetails(scope.row)">
                    查看详情
                  </button>

                  <button class="btn_edit" @click="handleEdit(scope.row)" style="background: transparent"
                          v-if="hasPermission('road:slopeInfo:add')">
                    编辑
                  </button>

                  <el-popconfirm  confirmButtonText='好的'
                    v-if="hasPermission('road:slopeInfo:del')"
                                 cancelButtonText='不用了' icon="" title="确定删除该边坡吗？"
                                 @confirm="handleDelete1(scope.row.id)">
                    <button slot="reference" class="btn_delete">删除</button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
          <!-- 编辑新增弹窗 -->
          <el-dialog
            :title="dialogTitle"
            v-if="isShowAddDialog"
            :visible.sync="isShowAddDialog"
            :close-on-click-modal="false"
            width="1080px">
            <div class="tabs_view">
              <el-steps
                :active="stepActive"
                space="200"
                simple
                finish-status="success">

                <el-step v-show="stepActive === 0" title="在建边坡"></el-step>

                <el-step title="基本情况"></el-step>
                <el-step title="坡体特征"></el-step>
                <el-step title="防护设施"></el-step>
                <el-step title="其他信息"></el-step>
                <el-step title="边坡照片"></el-step>
              </el-steps>
            </div>
            <div class="dialogAdd">

              <div v-show="stepActive === 0" class="box_wrap">
                <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
                         label-width="150px">

                  <el-form-item label="在建边坡" prop="id">
                    <el-select v-model="currentRow.buildSlopeId" filterable clearable placeholder="选择在建边坡"
                               @change="getBuildSlopeById">
                      <el-option
                        v-for="item in getBuildSlopeQueryList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div class="button-foot">
                  <el-button type="primary" plain @click="toForm('formEnquiry')">下一步</el-button>
                </div>
              </div>
              <div v-show="stepActive === 1" class="box_wrap">
                <form-base v-model="currentRow" ref="formBase"></form-base>
                <div class="button-foot">

                  <el-button type="primary" v-if="isBuildSlope==true" plain @click="stepActive--">上一步</el-button>
                  <el-button type="primary" plain @click="validatorForm('formBase')">下一步</el-button>
                </div>
              </div>
              <div v-show="stepActive === 2" class="box_wrap">
                <form-type v-model="currentRow" ref="formType"></form-type>
                <div class="button-foot">
                  <el-button type="primary" plain @click="stepActive--">上一步</el-button>
                  <el-button type="primary" plain @click="validatorForm('formType')">下一步</el-button>
                </div>
              </div>
              <div v-show="stepActive === 3" class="box_wrap">
                <form-fang-hu v-model="currentRow" ref="formFangHu"></form-fang-hu>
                <div class="button-foot">
                  <el-button type="primary" plain @click="stepActive--">上一步</el-button>
                  <el-button type="primary" plain @click="validatorForm('formFangHu')">下一步</el-button>
                </div>
              </div>
              <div v-show="stepActive === 4" class="box_wrap">
                <form-di-zhi v-model="currentRow" ref="formDizhi"></form-di-zhi>
                <div class="button-foot">
                  <el-button type="primary" plain @click="stepActive--">上一步</el-button>
                  <el-button type="primary" plain @click="validatorForm('formDizhi')">下一步</el-button>
                </div>
              </div>
              <div v-show="stepActive === 5" class="box_wrap">
                <form-img v-model="currentRow" ref="formImg"></form-img>
                <div class="button-foot">
                  <el-button type="primary" plain @click="stepActive--">上一步</el-button>
                  <el-button class="common_btn-defalut" :disabled="isDisabled1" type="primary" @click="validateForm">
                    提交档案
                  </el-button>
                </div>
              </div>
            </div>
          </el-dialog>

          <!-- 查看弹窗 -->
          <el-dialog
            :title="isEdit?dialogTitle:'边坡档案详情'"
            v-if="isShowDialog"
            :visible.sync="isShowDialog"
            :close-on-click-modal="false"
            width="1080px">
            <div v-if="currentRow.name" style="
                font-size: 25px;
                font-weight: 600;
                text-align: center;
                color: #1990FE;
                margin-bottom: 10px;
              ">
              {{ currentRow.name }}
            </div>
            <div class="dialogAdd">
              <el-tabs v-model="activeName" type="border-card" class="dialogCard">
                <el-tab-pane label="基本情况" name="base">
                  <form-base v-model="currentRow" ref="formBase" :roadList2="roadList" :isEdit="isEdit"></form-base>
                </el-tab-pane>
                <el-tab-pane label="坡体特征" name="type">
                  <form-type v-model="currentRow" ref="formType" :isLook="!isEdit"></form-type>
                </el-tab-pane>
                <el-tab-pane label="防护设施" name="survey">
                  <form-fang-hu v-model="currentRow" ref="formFangHu" :isLook="!isEdit"></form-fang-hu>
                </el-tab-pane>
                <el-tab-pane label="其他信息" name="risk">
                  <form-di-zhi v-model="currentRow" ref="formDizhi" :isLook="!isEdit"></form-di-zhi>
                </el-tab-pane>
                <el-tab-pane label="边坡照片" name="pic">
                  <el-row :gutter="10" v-if="!isEdit">
                    <el-col
                      :span="5"
                      v-for="(o, index) in currentRow.slopePicList"
                      :key="index">
                      <el-card :body-style="{ padding: '0px' }" style="color: #1990FE">
                        <el-image
                          @click="_previewImg(index, currentRow.slopePicList)"
                          style="height: 200px"
                          fit="scale-down"
                          :src="constUrl + o.url"></el-image>
                        <div style="padding: 14px">
                          <span>{{ o.name }}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ o.time | formatTimer }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <form-img
                    v-else
                    v-model="currentRow"
                    ref="formImg"
                  ></form-img>
                </el-tab-pane>
              </el-tabs>
              <!-- 操作按钮 -->
              <picture-viewer ref="imageViewer"></picture-viewer>
            </div>
            <span slot="footer" class="dialog-footer" v-if="isEdit">
              <el-button class="common_btn-white" type="info" @click="isShowDialog = false">取消</el-button>
              <el-button class="common_btn-defalut" :disabled="isDisabled1" type="primary"
                         @click="validateForm">确定</el-button>
            </span>
          </el-dialog>
          <!-- 授权可转在建弹窗-->
          <el-dialog
            title="新增可转在建"
            v-if="isEmpower"
            :visible.sync="isEmpower"
            :close-on-click-modal="false"
            width="800px">
            <div class="dialogAdd dialogEmpower">
              <el-form ref="formEmpower" label-position="right" :rules="ruleEmpower" :model="currentRow2"
                       label-suffix="："
                       label-width="150px">
                <el-form-item label="管养单位" prop="deptTreeId">
                  <organization v-model="currentRow2.deptTreeId" placeholder="选择管养单位"
                                @change="changeDept"></organization>
                </el-form-item>
                <el-form-item label="可转在建边坡" prop="id">
                  <el-select v-model="currentRow2.id" filterable clearable placeholder="选择在建边坡" @change="changeRoad">
                    <el-option
                      v-for="item in getBuildSlopeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer" v-if="isEmpower">
              <el-button class="common_btn-defalut" @click="isEmpower = false;currentRow2={}">取消</el-button>
              <el-button class="common_btn-defalut" :disabled="isDisabled1" type="primary"
                         @click="validateForm('empower')">确定</el-button>
            </span>
          </el-dialog>
          <!--查看在建转入弹窗-->
          <el-dialog
            title="查看在建转入"
            :visible.sync="isShowAddDialog1"
            :close-on-click-modal="false"
            width="750px">
            <el-form ref="formEmpower1" label-position="right" :model="currentRow1" label-suffix="："
                     label-width="150px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="路线名称：" prop=" roadName">
                    {{currentRow1. roadName}}
                  </el-form-item>

                  <el-form-item label="边坡名称：" prop="  name">
                    {{currentRow1. name}}
                  </el-form-item>
                  <el-form-item label="起点桩号：" prop=" startPointStakeNum">
                    {{currentRow1.startPointStakeNum}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="标段名称：" prop=" roadName">
                    {{currentRow1. roadName}}
                  </el-form-item>
                  <el-form-item label="边坡编号：" prop="  slopeNo">
                    {{currentRow1. slopeNo}}
                  </el-form-item>

                  <el-form-item label="终点桩号：" prop=" endPointStakeNum">
                    {{currentRow1. roadName}}
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>

<script>
  import XLoading from '@/components/animation/x-loading.vue'
  import OrganizationTree from "@/components/organization-tree/all";
  import Organization from '@/components/organization-unit/all'
  import {
    getSlopeList,
    slopeAdd,
    slopeAddMore,
    slopeUpdate,
    slopeDelete,
    getBuildSlope,
    changeBuild,
    getBuildSlopeQueryAddList,
    getBuildSlopeById,
    downloadSlopeInfo
  } from "@/services/model/road-mgmt";
  import PictureViewer from "@/components/picture-viewer/index-name";
  import constUrl from "@/services/env";
  import FormBase from "./slope-modules/form-base";
  import FormDiZhi from "./slope-modules/form-dizhi";
  import FormImg from "./slope-modules/form-img";
  import FormFangHu from "./slope-modules/form-fanghu";
  import FormType from "./slope-modules/form-type";
  import ItemMixins from "./slope-modules/item.mixins";
  import EchartsNestingChange from "./echarts/nesting";
  import EchartsStripChange from "./echarts/strip";
  import Permission from '@/utils/permission'
  import {
    getSlopeCount
  } from '@/services/model/statistics'
  import Enums from '@/utils/enums'

  export default {
    components: {
      Organization,
      FormBase,
      FormType,
      FormDiZhi,
      FormFangHu,
      FormImg,
      PictureViewer,
      OrganizationTree,
      EchartsNestingChange,
      EchartsStripChange,
      XLoading
    },
    mixins: [ItemMixins,Enums],
    data() {
      return {
        idList: [],
        restaurants: [],
        state: '',
        timeout: null,
        isGuoShengList:[{code:1,name:'全部'},{code:2,name:'国省干线'}],
        booleanList:[{code:1,name:'是'},{code:0,name:'否'}],
        isDisabled1: false,
        isDisabled2: false,
        isBuildSlope: true,
        getBuildSlopeQueryList: [],
        chartsName: ['echartsOneChange', 'echartsTwoChange', 'echartsThreeChange'],
        isEmpower: false,
        deptTree: {
          breadList: [], //面包屑
          deptTreeId: "",
        },
        // 接口正在加载
        isLoading: false,
        isShowDialogFile: false,
        fileName: "",
        newUploadForm: {
          fileName: "",
        },
        activeName: "base",
        search: {
          regionList: [],
        },
        slopeTypeList: [],
        EnumSlopeTypeList: [],
        EnumSlopeSlideTypeList: [],
        tableList: [],

        isShowDialog: false,
        isShowAddDialog: false,
        isShowAddDialog1: false,
        isEdit: false,
        constUrl,
        form: {
          page: 1,
          pageSize: 10,
          roadId: "",
          slopeType: "",
          flag: 0,
        },
        deptRoadList: [],
        getBuildSlopeList: [],
        currentRow: {},
        currentRow1: {},
        currentRow2: {},
        baseCurrentRow: {
          hasHistory: 0,
          hasRiver: 0,
          slopeSlideType: 1,
          stokeType: 1,
          slopeNo: "",
          slopeItem: {
            tuZhiItem: {},
            yanZhiItem: {},
            tianFangItem: {}
          },
          poHouItem: {},
          slopeType: 1,
          kangZhenLevel: '',
          fangHongBiaoZhun: '',
          slopeProtectList: [],
          slopePicList: [],
          riverProtectList: [],
          waterDrainStuffList: [],
          waterDrainShapeList: [],
          diBiaoShuiTiList: [],
          protectionDetailList: [],
          protectionTypeList: [],
          structureList: [],
          waterDrainStepList: [],
          groundwaterDrainStepList: [],
        },
        stepActive: 10,
        ruleEmpower2: {
          id: {required: true, message: "请选择在建边坡"},
        },
        ruleEmpower: {
          deptTreeId: {required: true, message: "请选择管养单位"},
          id: {required: true, message: "请选择可转在建边坡"},
        },
        rules: {
          userName: {required: true, message: "请输入负责人姓名"},
          address: {required: true, message: "请输入详细地址"},
          platformName: {required: true, message: "请输入单位名称"},
          platformType: {
            required: true,
            message: "请选择平台类型",
            trigger: "change",
          },
          phone: {required: true, validator: "请输入联系电话"},
        },
      };
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? "编辑边坡档案" : "新增边坡档案";
      },
      isEditStatus() {
        return !!this.currentRow.id;
      },
    },
    methods: {
      async downloadSlopeInfo(id) {
        await downloadSlopeInfo({id:id})
      },
      //table选择
      handleSelectionChange(val) {
        this.idList = []
        val.map(x => {
          this.idList.push(x.id)
        })
      },
      //查看在建转入信息
      async lookBuildSlopeInfo(row) {
        let res = await getBuildSlopeById({id: row.buildSlopeId})
        this.currentRow1 = res.data
        this.$nextTick(() => {
          this.isShowAddDialog1 = true

        })
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        this.form.roadId = item.id
        this.changeRoad()
      },
      handleChange(item) {
        if (item == '') {
          this.form.roadId = ''
        }
      },
      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      async handleDelete1(id) {
        this.idList = []
        this.idList.push(id)
        this.handleDelete()
      },
      async handleDelete() {

        let res = await slopeDelete({idList: this.idList})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '边坡删除成功'
          })
        }
        this.queryList()
      },
      async getSlopeCount() {
        let res = await getSlopeCount(this.form);
        let data = res.data
        this.$refs['echartsOneChange'].updateEchart('边坡类型', data.slopeCount, data.slopeType, '边坡总数', '边坡总数')
        if (data.slopeCount[0].value > 0) {
          this.$refs['echartsTwoChange'].updateEchart('路线边坡高度Top10', data.slopeTopTen);
          this.$refs['echartsThreeChange'].updateEchart('路线边坡数Top10', data.slopeCount, data.slopeRoadCount, '边坡总数', '边坡总数')
        } else {
          this.$refs['echartsTwoChange'].updateEchart('', [])
          this.$refs['echartsThreeChange'].updateEchart('', null, null, '', '')
        }
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId);
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate();
        this.form.deptTreeId = this.deptTree.deptTreeId;
        this.queryList();
        this.changeDept();
      },
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId);
        let data = []
        this.deptRoadList.map(x => {
          data.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = data
      },
      //获取在建边坡选择列表
      async getBuildSlope() {
        let res = await getBuildSlope()
        this.getBuildSlopeList = res.data
      },

      //获取在建边坡信息
      async getBuildSlopeById() {
        let res = await getBuildSlopeById({id: this.currentRow.buildSlopeId})
        if (res.code == 200) {
          let data = res.data
          this.currentRow.position = data.position
          this.currentRow.positionName = data.positionName
          this.currentRow.deptTreeId = data.deptTreeId
          this.currentRow.name = data.name
          this.currentRow.slopeLength = data.slopeLength
          this.currentRow.luJiWidth = data.luJiWidth
          this.currentRow.luMianWidth = data.luMianWidth
          this.currentRow.buildTime = data.buildTime
          this.currentRow.startLongitude = data.longitude
          this.currentRow.endLongitude = data.longitude
          this.currentRow.startLatitude = data.latitude
          this.currentRow.endLatitude = data.latitude
          this.currentRow.roadCount = data.roadCount
          this.currentRow.kangZhenLevel = data.kangZhenLevel
          this.currentRow.fangHongBiaoZhun = data.fangHongBiaoZhun
          this.currentRow.fangHongOther = data.fangHongOther
          this.currentRow.height = data.slopeItem.height
          this.currentRow.hasRiver = data.slopeItem.hasRiver
          this.currentRow.riverType = data.slopeItem.riverType
          this.currentRow.waterDrainStepList = data.waterDrainStepList
          this.currentRow.waterDrainStepRemark = data.waterDrainStepRemark
          this.currentRow.groundwaterDrainStepList = data.groundwaterDrainStepList
          this.currentRow.groundwaterDrainStepRemark = data.groundwaterDrainStepRemark

        }


      },
      //获取可转在建列表
      async getBuildSlopeQueryAddList() {
        let res = await getBuildSlopeQueryAddList()
        this.getBuildSlopeQueryList = res.data
      },

      // 查看大图
      _previewImg(index, urls) {
        const urlList = JSON.parse(JSON.stringify(urls));
        urlList.map((x) => {
          x.url = this.constUrl + x.url;
          return x;
        });
        // 显示照片查看器
        this.$refs.imageViewer.showViewer(urlList, index);
      },
      handleOutFile() {
        // 文件导出
        const {href} = this.$router.resolve({
          path: "/statics/slopeInfoTemplate.xls",
        });
        window.open(href);
      },
      beforeUpload(file) {
        // 上传前 文件校验
        this.files = file;
        const extension = file.name.split(".")[1] === "xls";
        const extension2 = file.name.split(".")[1] === "xlsx";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!extension && !extension2) {
          this.$message.warning("上传文件只能是 xls、xlsx格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.warning("上传文件大小不能超过 2MB!");
          return;
        }
        this.fileName = file.name;
        return false; // 返回false不会自动上传
      },
      // 确认导入文件
      validateFormFile() {
        this.$refs.newUploadForm.validate((valid) => {
          // 是否通过 表单验证
          if (valid) {
            if (this.fileName === "") {
              this.$message({
                message: "请选择要上传的文件！",
                type: "warning",
                showClose: true,
              });
              return false;
            }
            let fileFormData = new FormData();
            fileFormData.append("uploadFile", this.files, this.fileName); // 上传的文件
            slopeAddMore(fileFormData).then((res) => {
              // 上传请求
              if (res.code === 200) {
                this.fileName = "";
                this.isShowDialogFile = false;
                this.$notify({
                  type: "success",
                  title: "提示",
                  message: "添加成功",
                });
                this.queryList();
              }
            });
          } else {
            this.$message({
              type: "warning",
              message: "新增条件有误！",
              showClose: true,
            });
          }
        });
      },
      // 新增数据
      handleAddFile() {
        this.isShowDialogFile = true;
      },
      checkDetails(row) {
        this.currentRow = JSON.parse(JSON.stringify(row));
        this.initCheckItem();
        this.activeName = "base";
        this.isEdit = false;
        this.isShowDialog = true;
        this.$nextTick(() => {
          this.$refs.formBase.changeDept('look');
          this.$refs.formBase.getRoadSectionInfo2();
        });
      },
      async initCheckItem() {
        if (!this.currentRow.weiHaiDuiXiangList) {
          this.currentRow.weiHaiDuiXiangList = [];
        }
        if (!this.currentRow.slopeProtectList) {
          this.currentRow.slopeProtectList = [];
        }
        if (!this.currentRow.diBiaoShuiTiList) {
          this.currentRow.diBiaoShuiTiList = [];
        }
        if (!this.currentRow.riverProtectList) {
          this.currentRow.riverProtectList = [];
        }
        if (!this.currentRow.protectionTypeList) {
          this.currentRow.protectionTypeList = [];
        }
        if (!this.currentRow.waterDrainStepList) {
          this.currentRow.waterDrainStepList = [];
        }
        if (!this.currentRow.waterDrainStuffList) {
          this.currentRow.waterDrainStuffList = [];
        }
        if (!this.currentRow.waterDrainShapeList) {
          this.currentRow.waterDrainShapeList = [];
        }
        if (!this.currentRow.groundwaterDrainStepList) {
          this.currentRow.groundwaterDrainStepList = [];
        }
        if (!this.currentRow.slopeItem.yanZhiItem) {
          this.currentRow.slopeItem.yanZhiItem = {};
        }
        if (!this.currentRow.slopeItem.tianFangItem) {
          this.currentRow.slopeItem.tianFangItem = {};
        }
        if (!this.currentRow.slopeItem.tuZhiItem) {
          this.currentRow.slopeItem.tuZhiItem = {};
        }
      },
      /**
       * row  当前操作行的对象
       */
      handleEdit(row) {
        this.currentRow = JSON.parse(JSON.stringify(row));

        this.initCheckItem();
        this.activeName = "base";
        this.isEdit = true;
        this.isShowDialog = true;
        this.$nextTick(() => {
          this.$refs.formBase.changeDept('edit');
          this.$refs.formBase.getRoadSectionInfo2();
          this.$refs.formBase.getPositionName(this.currentRow.position, 'edit')
        });

      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1;
        return param;
      },
      // 新增数据
      handleAdd() {
        this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
        this.activeName = "base";
        this.isBuildSlope = false
        this.roadSectionInfo = {};
        this.isShowAddDialog = true;
        this.isEdit = false;

        this.$nextTick(() => {
          this.$refs.formBase.clearValidate();
        });
        // 修改内容
        this.stepActive = 1;
      },
      //复制加新增数据
      handleCopy() {
        this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
        this.getBuildSlopeQueryAddList()

        this.activeName = "base";
        this.roadSectionInfo = {};
        this.isShowAddDialog = true;
        this.isEdit = false;
        this.isBuildSlope = true;
        this.$nextTick(() => {
          this.$refs.formBase.clearValidate();
        });
        // 修改内容
        this.stepActive = 0;

      },
      //新增可转在建
      empower() {
        this.getBuildSlope()
        this.isEmpower = true

      },
      async queryList() {
        this.isLoading = true
        // 由于在前端进行过滤，所以name不能传到后端
        let res = await getSlopeList(this.form);
        this.tableList = res.data?.records || [];
        this.form.page = Number(res.data?.current);
        this.form.total = Number(res.data?.total);
        this.isLoading = false
        this.getSlopeCount()
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val;
        this.queryList();
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val;
        this.queryList();
      },

      // 表单提交
      validateForm(name) {
        this.isDisabled1 = true
        if (name == 'empower') {
          this.$refs.formEmpower.validate((valid) => {
            // 是否通过 表单验证
            if (valid) {

              this.changeBuild()
            }
          })
        } else {
          this.submitData();
        }
      },
      //确认转在建
      async changeBuild() {
        try {
          let res = await changeBuild(this.currentRow2)
          if (res.code === 200) {
            this.$notify({
              type: "success",
              title: "提示",
              message: "授权成功",
            });
            this.queryList();
            this.isEmpower = false;
          }
          this.isDisabled1 = false
        } catch (error) {
          this.isDisabled1 = false
        }
      },
      //选择路线
      changeRoad() {
        this.form.roadSectionId = "";
        this.bidSectionList = [];
        const {roadId} = this.form;
        this.getBidSectionList(roadId);
      },
      toForm() {
        this.$refs.formBase.changeDept()
        this.stepActive++;
      },
      // 表单校验
      validatorForm(name) {
        this.$refs[name]._validatorForm().then((res) => {
          this.stepActive++;
        });
      },
      // 新增编辑提交数据
      async submitData() {
        // 根据ID判断使用新增还是编辑
        let action = this.currentRow.id ? slopeUpdate : slopeAdd;
        // }
        try {
          let res = await action(this.currentRow);
          if (res.code === 200) {
            this.$notify({
              type: "success",
              title: "提示",
              message: this.currentRow.id ? "修改成功" : "添加成功",
            });
            this.queryList();
            this.isShowAddDialog = false;
            this.isShowDialog = false;
            this.isDisabled1 = false
          }
        } catch (error) {
          this.isDisabled1 = false
        }

      },
    },

    activated() {
    },
    filters: {},
    mounted() {
      this.currentRow = this.baseCurrentRow;
      this.queryDictList(['EnumSlopeType', 'EnumSlopeSlideType'], ['EnumSlopeTypeList', 'EnumSlopeSlideTypeList']);
    },
  };
</script>

<style scoped="scoped" lang="less">
  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 10px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: 600;
  }

  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
    font-weight: 600;
  }

  .el-tabs__item {
    font-size: 20px;
    line-height: 45px;
    height: 45px;
  }

  .tabs_view {
    // background: red;
    // margin-top: 0 !important;
    /deep/ .el-step.is-simple .el-step__title {
      font-size: 15px;
      line-height: 20px;
    }

    .el-steps {
      margin-bottom: 10px;
      // background: red;
      background: transparent;
      // color: red !important;
      margin-right: 10px;
    }
  }

  /deep/ .el-step__title {
    // background: red;
    width: 100%;
    // color: ;
    font-size: 12px !important;
  }

  /deep/ .is-process {
    color: #1990FE;
    font-size: 110% !important;
    font-weight: 700;

    .el-step__icon {
      border: #1990FE 2px solid;
    }
  }

  .button-foot {
    width: 100%;
    margin-top: 20px;
    height: 150px;
    text-align: center;

    .el-button {
      text-align: center;
      background: #1990FE;
      color: white;
      border: none;
    }
  }

  .el-dialog {
    .dialogEmpower {
      min-height: 150px;
      width: 100% !important;
      overflow: hidden !important;
    }

    .dialogAdd {
      width: 100%;
      // height: 500px;
      // background: red !important;
      overflow: auto;

      .dialogCard {
        background: transparent;
        border: none;
      }

      .el-card {
        // background: transparent !important;
      }

      .box_wrap {

        /deep/ .el-form {
          // background: yellow;
          /*height: 500px !important;*/
        }
      }
    }
  }

  // 设置滚动条

  .dialogAdd::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .dialogAdd::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #1990FE;
  }

  .dialogAdd::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }

  // 弹窗里面颜色
  .el-tabs--border-card {
    // background: transparent;
    border: 1px solid black;
    box-shadow: -12px -12px 8px black !important;
  }

  // 新增弹窗
  /deep/ .el-steps--simple {
    // background: red ;
  }

  // 修改input框
  /deep/ .el-input__inner {
    // background: red !important;
    border: 1px solid #1990FE;
    border-radius: 0;
  }

  //修改input框上的按钮
  /deep/ .el-input-group__prepend {
    border-radius: 0;
    border: 1px solid #1990FE;
  }

  // 设置btn 样式
  /deep/ .el-button--default {
    background: #1990FE !important;
    border-radius: 0%;
  }

  // 设施查看栏 tab头部
  /deep/ .el-tabs__nav-wrap {
    background: transparent !important;

    .el-tabs__nav-scroll {
      background: transparent;

      .el-tabs__nav {
        // background: red;
        .el-tabs__item {
          background: transparent !important;
        }

        .is-active {
          background: #1990FE !important;
          color: white;
          font-size: 120%;
          font-weight: 600;
        }
      }
    }
  }

  // 设置单选框
  /deep/ .el-checkbox {
    // color: white !important;
  }

  /deep/ .geology-children {
    color: #1990FE !important;
  }

  /deep/ .geology-children-fanghu {
    color: #1990FE !important;

  }

  .common_btn-defalut {
    border-radius: 8px;
  }

</style>
